<template>
	<div>
		<h1>{{ msg }} {{ studentName }}</h1>

		<!-- 通过父组件给子组件传递函数类型props实现：子给父传数据 -->
		<School :getSchoolName="getSchoolName" />

		<!-- 通过父组件给子组件绑定自定义事件实现：子给父传数据 (第一种写法：使用@) -->
		<!-- <Student @hello="getStudentName" /> -->


		<!-- 通过父组件给子组件绑定自定义事件实现：子给父传数据 (第二种写法：使用ref)-->
		<!-- native Vue3中已经被弃用 -->
		<!-- <Student ref="student" @click.native="show"/>  -->
		<Student ref="student" @click="show" />
	</div>
</template>

<script>

import Student from './components/Student.vue'
import School from './components/School.vue'



export default {
	name: 'App',
	components: {
		Student,
		School
	},
	data() {
		return {
			msg: '大唐夜探',
			studentName: ''
		}
	},
	methods: {
		getSchoolName(name) {
			console.log('App收到了名字', name);
		},
		// getStudentName(name) {
		// 	console.log('我是getStudentName被调用了', name);
		// 	this.studentName = name
		// },
		m1() {
			console.log('demo事件被触发了');
		},
		show() {
			alert(123)
		}
	},
	mounted() {
		// 绑定自定义事件
		this.$refs.student.$on('hello', name => {
			console.log('我是getStudentName被调用了', name);
			this.studentName = name
		})
	},
}
</script>

